<template>
    <button class="my-button" :class="[size, type]" @click="$emit('click', $event)" :disabled="disabled">
      <slot />
    </button>
  </template>
   
  <script>
   
  export default {
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: {
        type: String,
        default: 'mini'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    }
  }
  </script>
   
  <style scoped lang="less">
  @import '@/styles/index.less';
  // 基于类名定义一些和定制样式无关的样式
  .my-button {
    appearance: none;
    border: none;
    outline: none;
    background: #fff;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
  }
   
  // 大
  .large {
    width: 240px;
    height: 50px;
    font-size: 16px;
  }
   
  // 中
  .middle {
    width: 180px;
    height: 50px;
    font-size: 16px;
  }
   
  // 小
  .small {
    width: 98px;
    height: 40px;
  }
   
  //超小
  .mini {
    width: 80px;
    height: 32px;
  }
   
  .default {
    border-color: #e4e4e4;
    color: #666;
  }
   
  // 确认
  .primary {
    border-color: #27ba9b;
    background: #27ba9b;
    color: #fff;
  }
  .primary:hover{
    background: #60bda9;
    border-color: #60bda9;
  }
   
  // 橙色
  .plain {
    border-color: @base-color;
    color: #fff;
    background: @base-color;
  }
  .plain:hover{
    background: #e46052;
    border-color: #e46052;
  } 

  // 灰色
  .gray {
    border-color: #ccc;
    background: #ccc;
    color: #fff;
  }
  .gray:hover{
    border-color: #dbd9d9;
    background: #dbd9d9;
  }
  </style>